<template>
  <!-- 批阅-随堂练习列表 -->
  <div id="ss-item-bank" class="jx-content">
    <div class="search-box fl">
      <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="80px">
        <el-form-item label="学生信息 :">
          <el-input v-model="searchForm.studentInfo" placeholder="请输入学号或姓名"></el-input>
        </el-form-item>
        <el-form-item label="提交状态 :">
          <el-select v-model="searchForm.status" :clearable="true" placeholder>
            <el-option label="未提交" value="0"></el-option>
            <!-- <el-option label="已提交" value="1"></el-option> -->
            <el-option label="未批阅" value="2"></el-option>
            <el-option label="已批阅" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div @click="getList" class="button-style">搜 索</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-group fr">
      <el-form :inline="true">
        <el-form-item>
            <el-button
                :loading="loading"
                class="button-style"
                @click="setFullMarks"
            >
                满分设置
            </el-button>
        </el-form-item>
        <el-form-item>
            <div
                class="refresh-btn"
                @click="refreshList"
            >
                <i class="iconfont icon-refresh"></i>
                <span>刷 新</span>
            </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="clear"></div>
    <div v-if="resData">
      <el-table :data="resData.content" style="width: 100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="userNumber" label="学号"></el-table-column>
        <el-table-column prop="userName" label="学生姓名"></el-table-column>
        <el-table-column prop="submitMessage" label="提交状态"></el-table-column>
        <el-table-column
            prop=""
            width="200"
            label="提交时间"
        >
            <template slot-scope="scope">
                <div v-if="scope.row.subTime">{{ scope.row.subTime }}</div>
                <div v-else style="color:#ccc;">—</div>
            </template>
        </el-table-column>
        <el-table-column prop="checkMessage" label="评价状态">
          <template slot-scope="scope">
            <div v-if="scope.row.checkMessage">{{ scope.row.checkMessage }}</div>
            <div v-else style="color:#ccc;">—</div>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="随堂练习评分">
          <template slot-scope="scope">
            <div v-if="scope.row.score || scope.row.check">{{ scope.row.score }}</div>
            <div v-else style="color:#ccc;">—</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div class="table-button">
              <a href="javascript:;" :class="{'btn-disabled':!scope.row.submit}" @click="toMarkingPractive(scope.row.id,scope.row.submit)">查看&nbsp;&nbsp;</a>
              <a href="javascript:;" :class="{'btn-disabled':!scope.row.submit}" @click="resetSheet(scope.row.id,scope.row.submit)"> 重新提交</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pageNum" :page-size="resData.pageSize" :total="resData.total" layout="total, prev, pager, next, jumper"></el-pagination>
    </div>
    <fullMarksDialog
        ref="fullMarksDialog"
    />
  </div>
</template>
<script>
import fullMarksDialog from './components/fullMarksDialog';
import { getReviewFullMark } from '../../../api/myCourse';
import axios from "axios";
import $ from "jquery";
export default {
    components: {
        fullMarksDialog
    },
  data() {
    return {
      classId: this.$route.query.id,
      chapterId: this.$route.query.chapterId,
      searchForm: {
        //学生姓名模糊查询
        studentInfo: "",
        //提交状态：0未提交，1已提交
        status: "",
        pageNum: 1
      },
      resData: {},
      currentPage: 10,
      loading: false
    };
  },
  mounted() {
    this.init();
    console.log(this.classId, 1);
    console.log(this.chapterId, 2);
  },
  methods: {
    init() {
      this.getList();
    },
    //重新答卷
    resetSheet(id,submit){
      let that = this;
      if (!submit) {
        return;
      }
      //2021-01-26注释
      that.$confirm('本操作将清空学生回答记录，确认重新提交么？是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios
          .delete(
            ///course/{courseId}/check/deletePractice
            "/tes/course/" +
              that.$localstorage.getLocalStorage("setCourseId") +
              "/check/deletePractice?id="
              + id
          )
          .then(function(res) {
            console.log("成功");
            console.log(res);
            if (res.status === 200) {
              if (res.data.code === 200) {
                that.$message({
                  message: res.data.message,
                  type: "success"
                });
                that.init();
              } else {
                that.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            }
          })
          .catch(function(err) {
            if (err.response) {
              console.log(err.response);
            }
          });
				}).catch(() => {
				});
      
    },
    //新标签打开
    toMarkingPractive(id, submit) {
      let that = this;
      if (!submit) {
        return;
      }
      window.localStorage.setItem("checkingId", id);
      let routerData = that.$router.resolve({
        path: "/MarkingPractice",
        query: { id: that.classId, chapterId: that.chapterId }
      });
      window.open(routerData.href, "_blank");
    },
    //刷新
    refreshList() {
      this.getList();
      this.$message.success("刷新成功");
    },
    //获取table列表
    getList() {
      let that = this;
      axios
        .get(
          // "http://rap2api.taobao.org/app/mock/125327/course/{courseId}/check/type/{type}/class/{classId}/chapter/{chapterId}",
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/type/1/class/" +
            that.classId +
            "/chapter/" +
            that.chapterId,
          { params: that.searchForm }
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.resData = res.data.data;
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    handleSizeChange() {},
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },

    setFullMarks() {
        this.loading = true;
        const id = window.localStorage.getItem('setCourseId');
        getReviewFullMark({
            classId: this.classId,
            courseId: id,
            chapterId: this.chapterId,
            type: 1
        }, id).then((res) => {
            this.$refs.fullMarksDialog.init(2, {
                fullMark: res.data,
                courseId: id,
                classId: this.classId,
                status: 1,
                chapterId: this.chapterId
            });
            this.loading = false;
        }).catch(() => {
            this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#ss-item-bank {
  width: 1200px;
  margin: 20px auto 30px;
  .btn-disabled {
    cursor: not-allowed;
    background-color: none;
    border-color: none;
    color: #c0c4cc;
  }
  .dialog-questions {
    .dialog-content {
      padding: 20px 64px 0;
      .question-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
      }
      .question-chose {
        font-size: 14px;
        line-height: 24px;
        padding: 6px 0;
        display: flex;
        .question-flex {
          flex: 1;
        }
      }
      .question-answer {
        font-size: 16px;
        .chose {
          font-size: 18px;
          color: #385899;
          vertical-align: -2px;
        }
        margin-top: 20px;
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .dialog-import-questions {
    .dialog-content {
      text-align: center;
      padding: 60px 0 40px;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .progress-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .progress-line {
      flex: 1;
      margin-right: 10px;
    }
  }

    .el-table__body-wrapper {
        .el-input {
            width: 46px;
            height: 32px;
        }
        .el-input__inner {
            position: relative;
            top: 5px;
            width: 100%;
            height: 20px;
            padding: 0 5px;
        }
    }
}
</style>
<style lang="scss" scoped>
#ss-item-bank {
    .refresh-btn {
        color: #385899;
        font-size: 14px;
        cursor: pointer;
        .iconfont {
            position: relative;
            top: 2px;
            font-size: 19px;
        }
    }

    .button-style {
        font-weight: 400;
    }
}

</style>
